<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>外事登记列表 - 领导日程说明系统</title>
    <meta th:replace="~{head/head_include ::  title}"/>
    <link rel="stylesheet" th:href="@{/head_res/bootstrapvalidator/css/form-validation.css}">
    <script type="text/javascript" th:src="@{/head_res/bootstrapvalidator/js/form-validation.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/head_res/ueditor/ueditor.config.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/head_res/ueditor/ueditor.all.min.js}"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" th:src="@{/head_res/ueditor/lang/zh-cn/zh-cn.js}"></script>
    <script type="text/javascript" th:src="@{/common/resource/H-ui.admin/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js}"></script>
    <link th:href="@{/common/resource/H-ui.admin/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .ztree li span.button.firstPage {float:right; margin-left:2px; margin-right: 0; background-position:-144px -16px; vertical-align:top; *vertical-align:middle}
        .ztree li span.button.prevPage {float:right; margin-left:2px; margin-right: 0; background-position:-144px -48px; vertical-align:top; *vertical-align:middle}
        .ztree li span.button.nextPage {float:right; margin-left:2px; margin-right: 0; background-position:-144px -64px; vertical-align:top; *vertical-align:middle}
        .ztree li span.button.lastPage {float:right; margin-left:2px; margin-right: 0; background-position:-144px -32px; vertical-align:top; *vertical-align:middle}
        ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
    </style>
</head>
<body>
<meta th:replace="~{head/head_include ::  header}"/>
<!-- 网页的主体 -->
<div class="container">
    <div class="col-md-8 col-sm-10">
        <form id="form" class="form-horizontal" method="post"
              th:action="@{/head/users/activityInsertSubmit}">

            <h2 class="col-sm-10 col-sm-offset-1 form-signin-heading text-center">添加外事登记</h2>
            <div class="form-group">
                <label for="name" class="col-sm-3 control-label">名称</label>
                <div class="col-sm-8">
                    <input type="text" id="name" name="entity.name" class="form-control"
                           th:value="${one.name}" placeholder="名称">
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-sm-3 control-label">部门</label>
                <div class="col-sm-8">
                    <input type="hidden" class="form-control" th:value="${one?.organId }" placeholder=""
                            id="organId" name="entity.organId">
                    <input type="text" class="form-control" th:value="${one?.organObj?.treeName }" placeholder=""
                           id="organIdVal" onclick="showMenu();" readonly>
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-sm-3 control-label">领导</label>
                <div class="col-sm-8">
                    <select id="leaderId" name="entity.leaderId" class="form-control">
                        <th:block th:each="dataTemp : ${leaderDataList}">
                            <option th:selected="${one.leaderId == dataTemp.id}" th:value="${dataTemp.id}" th:text="${dataTemp.name}"/>
                        </th:block>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="currDate" class="col-sm-3 control-label">日期</label>
                <div class="col-sm-8">
                    <input type="text" id="currDate" name="currDate" th:value="${#dates.format(one.currDate,'yyyy-MM-dd HH:mm:ss')}" readonly="true"
                           class="form-control mr-sm-2"
                           onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
                </div>
            </div>
            <div class="form-group">
                <label for="backDate" class="col-sm-3 control-label">返回时间</label>
                <div class="col-sm-8">
                    <input type="text" id="backDate" name="backDate" th:value="${#dates.format(one.backDate,'yyyy-MM-dd HH:mm:ss')}" readonly="true"
                           class="form-control mr-sm-2"
                           onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
                </div>
            </div>
            <div class="form-group">
                <label for="note" class="col-sm-3 control-label">备注</label>
                <div class="col-sm-8">
                    <input type="text" id="note" name="entity.note" class="form-control"
                           th:value="${one.note}" placeholder="备注">
                </div>
            </div>
            <div class="form-group">
                <label for="proccedEndTime" class="col-sm-3 control-label">处理期限</label>
                <div class="col-sm-8">
                    <input type="text" id="proccedEndTime" name="proccedEndTime" th:value="${#dates.format(one.proccedEndTime,'yyyy-MM-dd HH:mm:ss')}" readonly="true"
                           class="form-control mr-sm-2"
                           onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
                </div>
            </div>
            <div class="form-group">
                <label for="editor" class="col-sm-2 control-label">内容:</label>
                <div class="col-sm-8">
                    <script id="editor" name="entity.content" type="text/plain" style="width:800px;height:300px;" th:text="${one.content}"></script>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-8 col-sm-offset-2">
                    <button class="btn btn-md btn-primary" type="submit">提交</button>
                </div>
            </div>
        </form>
    </div>
    <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
        <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
    </div>
    <div id="rootNode" th:text="${organDataList}" style="display: none"></div>
</div>
<meta th:replace="~{head/head_include ::  footer}"/>
</body>
</html>
<script type="text/javascript" th:inline="javascript">
    var setting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"
        },
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable:true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: ""
            }
        },
        callback: {
            onClick: onClick,
            onCheck: onCheck
        }
    };

    var zNodes = JSON.parse($("#rootNode").html());
    console.info("==部门数据==", zNodes);

    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }

    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = zTree.getCheckedNodes(true),
            v = "";
        currId = "";
        for (var i=0, l=nodes.length; i<l; i++) {
            v += nodes[i].name + ",";
            currId += nodes[i].id;
        }
        if (v.length > 0 ) v = v.substring(0, v.length-1);
        var cityObj = $("#organIdVal");
        cityObj.attr("value", v);
        console.info("======")
        $("#organId").val(currId);
    }

    function showMenu() {
        var cityObj = $("#organIdVal");
        var cityOffset = $("#organIdVal").offset();
        $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }

    $(function()
    {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        $("#form").FormValidation({
            fields:
                {
                    /* 用户名 */
                    name:
                        {
                            validators: {
                                notEmpty: {
                                    message: '名称不能为空'
                                },
                                stringLength: {
                                    min: 4,
                                    max:40,
                                    message: '名称的长度为在4位与40位之间'
                                }
                            }
                        },
                    weekNum:
                        {
                            validators: {
                                notEmpty: {
                                    message: '周期数不能为空'
                                },
                                regexp: {
                                    regexp: /^[\d]+$/i,
                                    message: '周期数只能为数字'
                                }
                            }
                        },
                    proccedEndTime:
                        {
                            validators: {
                                notEmpty: {
                                    message: '处理期限不能为空'
                                },
                            }
                        },
                }
        });

        var ue = UE.getEditor('editor');
        var content = [[${one?.content}]];
        /* 百度编辑器提供的方法 */
        ue.addListener("ready", function () {
            /* 为百度编辑器赋值 */
            ue.setContent(content);
        });
    });
</script>